<template>
  <div class="team-management">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
          v-model="searchQuery"
          placeholder="搜索成员"
          style="width: 300px; margin-right: 20px;"
      />
      <el-button type="primary" @click="openCreateDialog">添加成员</el-button>
    </div>

    <!-- 团队成员列表 -->
    <el-table :data="filteredMembers" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="contact" label="联系方式" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteMember(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 成员详情 -->
    <el-dialog v-model="detailVisible" title="成员详情" width="50%">
      <div v-if="selectedMember">
        <h3>{{ selectedMember.name }}</h3>
        <p><strong>角色：</strong>{{ selectedMember.role }}</p>
        <p><strong>联系方式：</strong>{{ selectedMember.contact }}</p>
        <p><strong>权限：</strong>{{ selectedMember.permissions.join(', ') }}</p>
      </div>
    </el-dialog>

    <!-- 创建/编辑成员弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑成员' : '添加成员'" width="50%">
      <el-form :model="memberForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="memberForm.name" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="memberForm.role">
            <el-option label="项目经理" value="项目经理" />
            <el-option label="开发人员" value="开发人员" />
            <el-option label="测试人员" value="测试人员" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="memberForm.contact" />
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="memberForm.permissions">
            <el-checkbox label="任务管理" />
            <el-checkbox label="文档管理" />
            <el-checkbox label="团队管理" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMember">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 团队成员数据
const members = ref([
  { id: 1, name: '张三', role: '项目经理', contact: '123@xx.com', permissions: ['任务管理', '团队管理'] },
  { id: 2, name: '李四', role: '开发人员', contact: '456@xx.com', permissions: ['任务管理'] },
]);

// 搜索条件
const searchQuery = ref('');

// 筛选后的成员列表
const filteredMembers = computed(() => {
  return members.value.filter(member =>
      member.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 成员详情
const selectedMember = ref(null);
const detailVisible = ref(false);

// 创建/编辑成员
const dialogVisible = ref(false);
const isEdit = ref(false);
const memberForm = ref({
  id: null,
  name: '',
  role: '',
  contact: '',
  permissions: [],
});

// 打开创建成员弹窗
const openCreateDialog = () => {
  memberForm.value = {
    id: null,
    name: '',
    role: '',
    contact: '',
    permissions: [],
  };
  isEdit.value = false;
  dialogVisible.value = true;
};

// 打开编辑成员弹窗
const openEditDialog = (member) => {
  memberForm.value = { ...member };
  isEdit.value = true;
  dialogVisible.value = true;
};

// 保存成员
const saveMember = () => {
  if (isEdit.value) {
    // 更新成员
    const index = members.value.findIndex(member => member.id === memberForm.value.id);
    members.value.splice(index, 1, memberForm.value);
  } else {
    // 创建成员
    memberForm.value.id = members.value.length + 1;
    members.value.push(memberForm.value);
  }
  dialogVisible.value = false;
};

// 删除成员
const deleteMember = (member) => {
  const index = members.value.findIndex(m => m.id === member.id);
  members.value.splice(index, 1);
};

// 查看成员详情
const showMemberDetail = (member) => {
  selectedMember.value = member;
  detailVisible.value = true;
};
</script>

<style scoped>
.team-management {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>